import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import type { CSSProperties } from 'react'

// 导入背景图 (需要将图片放在public/images目录)
const bgImageUrl = '/images/1.png'

interface StyleProps {
  loginPage: CSSProperties;
  loginContainer: CSSProperties;
  loginTitle: CSSProperties;
  form: CSSProperties;
  formGroup: CSSProperties;
  label: CSSProperties;
  input: CSSProperties;
  button: CSSProperties;
  error: CSSProperties;
}

const style: StyleProps = {
  loginPage: {
    width: '100vw',
    height: '100vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundImage: `url(${bgImageUrl})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat'
  },
  loginContainer: {
    width: "400px",
    padding: "30px",
    borderRadius: "12px",
    backgroundColor: "rgba(26, 26, 26, 0.85)",
    boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
    backdropFilter: "blur(10px)",
    border: "1px solid rgba(255, 255, 255, 0.1)"
  },
  loginTitle: {
    fontSize: "24px",
    fontWeight: "600",
    color: "#fff",
    marginBottom: "25px",
    textAlign: "center"
  },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: "20px"
  },
  formGroup: {
    display: "flex",
    flexDirection: "column",
    textAlign: "left"
  },
  label: {
    marginBottom: "8px",
    fontSize: "14px",
    color: "#e0e0e0",
    fontWeight: "500"
  },
  input: {
    padding: "12px 15px",
    borderRadius: "6px",
    border: "1px solid rgba(255, 255, 255, 0.1)",
    backgroundColor: "rgba(42, 42, 42, 0.8)",
    color: "rgba(255, 255, 255, 0.87)",
    fontSize: "16px",
    transition: "border-color 0.2s",
    outline: "none"
  },
  button: {
    marginTop: "10px",
    padding: "12px",
    borderRadius: "6px",
    border: "none",
    backgroundColor: "#6366f1", // 紫蓝色按钮
    color: "white",
    fontWeight: "500",
    fontSize: "16px",
    cursor: "pointer",
    transition: "background-color 0.2s"
  },
  error: {
    color: "#ff6b6b",
    marginTop: "10px",
    fontSize: "14px",
    textAlign: "center"
  }
}

const Login = () => {
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [loading, setLoading] = useState(false)
  const navigate = useNavigate()

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")
    
    // 表单验证
    if (!username.trim() || !password.trim()) {
      setError("用户名和密码不能为空")
      return
    }
    
    try {
      setLoading(true)
      // 这里模拟一个登录API调用
      // 实际项目中，替换为真实的API调用
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // 模拟登录成功
      if (username === "admin" && password === "123456") {
        // 存储登录状态
        localStorage.setItem("isLoggedIn", "true")
        localStorage.setItem("user", JSON.stringify({ username }))
        
        // 登录成功后跳转到首页
        navigate("/homepage")
      } else {
        setError("用户名或密码错误")
      }
    } catch (err) {
      setError("登录失败，请稍后重试")
      console.error("登录错误:", err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div style={style.loginPage}>
      <div style={style.loginContainer}>
        <h2 style={style.loginTitle}>WMS内部系统登录</h2>
        <form style={style.form} onSubmit={handleSubmit}>
          <div style={style.formGroup}>
            <label htmlFor="username" style={style.label}>用户名</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="请输入用户名"
              style={style.input}
              disabled={loading}
            />
          </div>
          <div style={style.formGroup}>
            <label htmlFor="password" style={style.label}>密码</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
              style={style.input}
              disabled={loading}
            />
          </div>
          <button 
            type="submit" 
            style={style.button}
            disabled={loading}
          >
            {loading ? "登录中..." : "登录"}
          </button>
          {error && <div style={style.error}>{error}</div>}
        </form>
      </div>
    </div>
  )
}

export default Login
